<template>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>Administrator</el-breadcrumb-item>
      <el-breadcrumb-item>test</el-breadcrumb-item>
      <el-breadcrumb-item>pipelines</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="pipelinesTables">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in pipelinesLabel" :key=index :label="item.label" :name="item.name">
        <!-- <component :is='item.detail'></component> -->
        <tabProjects v-if="activeName === '1'" v-bind:result="projectres"></tabProjects>
        <tabPipelines v-if="activeName === '2'"></tabPipelines>
        <tabJobs v-if="activeName === '3'" v-bind:result="jobres"></tabJobs>
        <tabFaildjobs v-if="activeName === '4'"></tabFaildjobs>
        <tabSchedules v-if="activeName === '5'"></tabSchedules>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>


<script>
  import { getGitlabJob, pipelineJobs } from '@/utils/common.js'

  import tabPipelines from './components/pipelines.vue'
  import tabJobs from './components/jobs.vue'
  import tabFaildjobs from './components/failedjobs.vue'
  import tabProjects from './components/projects.vue'
  import tabSchedules from './components/schedules.vue'
  export default {
    data() {
      return {

        activeName: '1',

        pipelinesLabel: [
          { label: "Projects", name: "1", detail: tabProjects, },
          { label: "Pipeline", name: "2", detail: tabPipelines, },
          { label: "Jobs", name: "3", detail: tabJobs, },
          { label: "Failed Jobs", name: "4", detail: tabFaildjobs, },
          { label: "Schedules", name: "5", detail: tabSchedules, },

        ],

        projectres: [],
        jobres: []
      }
    },
    components: {
      tabPipelines,
      tabJobs,
      tabFaildjobs,
      tabProjects,
      tabSchedules,
    },
    methods: {
      handleClick(tab, event) {

        // console.log(tab.props.name)
        // console.log(tab.paneName);
        if (tab.props.name === '1') {
          this.activeName = '1'
          this.getGitlabJobs()
        } else if (tab.props.name === '2') {
          this.activeName = '2'

        } else if (tab.props.name === '3') {
          this.activeName = '3'
          this.pipelineJob()
        } else if (tab.props.name === '4') {
          this.activeName = '4'
        } else if (tab.props.name === '5') {
          this.activeName = '5'
        }

      },

      async getGitlabJobs() {
        await getGitlabJob().then(res => {
          this.projectres = res;

        })
      },
      async pipelineJob() {
        await pipelineJobs().then(res => {
          // console.log(res)
          this.jobres = res
        })
      }
    },


  }

</script>

<style scoped>

</style>